import { _decorator, Component, Node, Button, Label } from 'cc';
import { Sprite } from 'cc';
import { color } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveNumber } from '../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { Colors } from '../../game/basic';
import { Merge, MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { EditorQueueInspector } from './EditorQueueInspector';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('QueueColorButton')
@executeInEditMode
export class QueueColorButton extends BaseView {

    editorQueueInspector: EditorQueueInspector = null;

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    blind = ReactiveProperty.Create(false);

    checked = ReactiveProperty.Create(false);

    @property(Button)
    selfButton: Button = null;

    @property(Label)
    idLabel: Label = null;

    useObserves() {
        return [
            Merge(this._colorId, this.blind).subscribe(this.refresh.bind(this)),
            this.checked.subscribe(this.refreshChecked.bind(this)),
            BindButton(this.selfButton).subscribe(this.selfButtonClicked.bind(this)),
            MergeASAP(this.editorQueueInspector.currentSelectedIndex).subscribe(_ => {
                this.checked.value = this.editorQueueInspector.currentSelectedIndex.value == this.node.getSiblingIndex();
            })
        ];
    }

    refresh() {
        this.getComponent(Sprite).color = Colors[this.colorId] ?? color(0, 0, 0);
        let text = this.colorId.toString();
        if (this.blind.value) text += '(B)';
        this.idLabel.string = text;
    }
    refreshChecked() {
        this.node.getChildByName('Checked').active = this.checked.value;
    }

    selfButtonClicked() {
        if (this.editorQueueInspector.currentSelectedIndex.value == this.node.getSiblingIndex()) {
            this.editorQueueInspector.currentSelectedIndex.value = null;
        } else {
            this.editorQueueInspector.currentSelectedIndex.value = this.node.getSiblingIndex();
        }
    }

}


